{{ template "main.layout.html" . }}

{{ define "title" }}
  {{ .Recipe.Name }}
{{ end }}

{{ define "page" }}
  <div class="p-2 md:p-4">
    <hgroup>
      <h1 class="text-4xl font-bold">{{ .Recipe.Name }}</h1>
      {{ if .Admin }}
        <div class="flex items-center">
          <a
            href="/admin/recipes/{{ .Recipe.ID }}"
            class="btn btn-secondary"
          >
            Edit
          </a>
        </div>
      {{ end }}
    </hgroup>
    <p class="mt-2 text-gray-600">{{ .Recipe.Description }}</p>

    {{ if .Instructions }}
      <h2 class="mt-4 text-2xl font-bold">Instructions</h2>
      <div class="markdown">
        {{ .Instructions }}
      </div>
    {{ end }}

    {{ if false }}
      <img
        src="{{ .Recipe.ImageURL }}"
        alt="{{ .Recipe.Name }}"
        class="mt-4 rounded-lg shadow-md"
      />
    {{ end }}

    {{ if .Ingredients }}
      <h2 class="mt-4 text-2xl font-bold">Ingredients</h2>
      <ul class="mt-2 list-disc  pl-4">
        {{ range .Ingredients }}
          <li class="mb-1">
            <span>{{ .Ingredient.Name }}</span>
            {{ if ne .Unit "unit" }}
              : <span class="font-semibold">{{ .Quantity }}</span>{{ if .Unit }}
                {{ .Unit }}
              {{ end }}
            {{ end }}
          </li>
        {{ end }}
      </ul>
    {{ end }}

  </div>
{{ end }}
